<template>
  <div class="goods">
    <el-row>
      <el-col :span="6">
        <div class="menu-wrapper" ref="menuWrapper">
          <ul v-if="goods.length">
            <!-- current -->
            <li
              class="menu-item"
              v-for="(good, index) in goods"
              :key="index"
              :class="{ current: currentIndex === index }"
            >
              <span
                class="text"
                @click="changeView('#fooditem' + index, index)"
              >
                <img v-if="good.icon" class="icon" :src="good.icon" />
                <a>{{ good.name }}</a>
              </span>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="foods-wrapper" ref="foodsWrapper">
          <ul v-if="goods.length" ref="test">
            <!-- food-list-hook -->
            <li
              :id="'fooditem' + index"
              class="food-list"
              v-for="(good, index) in goods"
              :key="index"
            >
              <h1 class="title">{{ good.name }}</h1>
              <ul>
                <li
                  class="food-item"
                  v-for="(item, index) in good.foods"
                  :key="index"
                >
                  <div class="icon">
                    <img v-lazy="item.icon" />
                  </div>
                  <div class="content">
                    <div class="head">
                      <span class="name">{{ item.name }}</span>
                      <span class="tip" v-if="item.description"
                        >({{ item.description }})</span
                      >
                    </div>
                    <div class="extra">
                      <span class="count"> 月售 {{ item.sellCount }} 份 </span>
                      <span> 好评率 {{ item.rating }}% </span>
                    </div>
                    <div class="price">
                      <span class="now">
                        ￥{{ item.price }}&nbsp;&nbsp;&nbsp;
                      </span>
                      <span class="old" v-if="item.oldPrice !== ''">
                        ￥{{ item.oldPrice }}
                      </span>
                    </div>
                    <!-- <div class="cartcontrol-wrapper">CartControl</div> -->
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { mapActions, mapState } from "vuex";
export default {
  name: "ShopGoodsGetoffsetTop",
  data() {
    return {
      currentIndex: 0, //标识当前选中的项
      ScrollTop: 0, //收集右侧滑动的距离
      topList: [], //存放每一个列表到容器上方的距离的距离
    };
  },
  mounted() {
    //数据加载完成设置滚动条
    this.GetGoods(() => {
      this.$nextTick(() => {
        //滚动使用原生的进行设置，结合插件会产生bug
         /* new BScroll(".menu-wrapper", {
          probeType: 1,
          // 必须开启点击，不然设置滑动列表项的点击事件不会生效
          click: true,
        });
        this.foodwrapper = new BScroll(".foods-wrapper", {
          probeType: 3,
        }); */
        // 计算获取topList
        (() => {
          //伪数组
          let topList = [];
          // let top = 0
          //topList.push(0)
          let food_list = this.$refs.foodsWrapper.getElementsByClassName(
            "food-list"
          );
          Array.from(food_list).forEach((item) => {
            topList.push(item.offsetTop);
          });
          this.topList = topList;
        })();
        //添加滚动监听事件
        let that = this;
        function onScroll() {
          //滑动的高度
          //这里遇到一个bug,当右侧页面已经在一个高度，这里获取滑动就有点问题
          //这里应该计算当前已经滑出多高
          let temp = foodwrapper.scrollTop
          that.ScrollTop = temp
          let top = 0
          let len = that.topList.length;
          for (let i = 1; i < len; i++) {
            top = that.topList[i];
            console.log(temp,top)
            if ( temp < top) {
              that.currentIndex = i -1;
              break;
            }
          }
        }
        let foodwrapper  = this.$refs.foodsWrapper
        foodwrapper.addEventListener("scroll", onScroll);
      });
    });
  },
  methods: {
    ...mapActions(["GetGoods"]),
    changeView: function (id, index) {
      // 指定平滑滑动
      //这个是原生方法
      this.$refs.foodsWrapper.scrollTo({
        top: this.topList[index],
        left: 0,
        behavior: "smooth",
      });
      //this.ScrollY = this.topList[index]
      //这个是插件中的函数
      //this.foodwrapper.scrollTo(0, -this.topList[index])
    },
  },
  computed: {
    ...mapState(["goods"]),
  },
};
</script>
<style lang="less" scoped>
.goods {
  background: #f3f5f7;
  /* height: calc(100% - 201px);
  overflow: scroll; */
  .menu-wrapper {
    height: calc(100vh - 201px);
    overflow: scroll;
    border-right: cornsilk 1px solid;
    .menu-item {
      height: 50px;
      border-bottom: solid 1px red;
      line-height: 50px;
      .text {
        display: block;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        .icon {
          width: 12px;
          height: 12px;
          margin: 0 5px;
        }
      }
    }
    .current {
      background-color: white;
      color: tomato;
    }
  }
  .foods-wrapper {
    height: calc(100vh - 201px);
    overflow: scroll;
    .food-list {
      .title {
        padding-left: 10px;
        height: 25px;
        line-height: 25px;
        font-size: 16px;
        color: rgb(147, 153, 159);
      }
      .food-item {
        display: flex;
        padding: 18px;
        padding-left: 10px;
        background-color: white;
        border-bottom: red 1px solid;
        &:first-child {
          border-top-left-radius: 3px;
          border-top-right-radius: 3px;
        }
        &:last-child {
          border-bottom: none;
          border-radius: 3px;
        }
        .icon {
          img {
            width: 57px;
            height: 57px;
          }
        }
        .content {
          height: 57px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          margin-left: 8px;
          .head {
            flex: 1;
            font-size: 14px;
            display: flex;
            align-items: center;
            width: 100%;
            //处理文字太长布局效果问题
            .name {
              width: 70%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .tip {
              width: 30%;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-size: 12px;
            }
          }
          .extra {
            flex: 1;
            font-size: 10px;
            color: rgb(147, 153, 159);
            display: flex;
            align-items: center;
            .count {
              margin-right: 10px;
            }
          }
          .price {
            flex: 1;
            font-size: 10px;
            display: flex;
            align-items: center;
            .now {
              font-size: 13px;
              color: red;
            }
            .old {
              color: rgb(147, 153, 159);
              text-decoration-line: line-through;
            }
          }
        }
      }
    }
  }
}
</style>
